﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <!--ie模拟渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <title>登录</title>
    <link href="@Url.Content("~/Content/Scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css")" rel="stylesheet" />

    <link href="@Url.Content("~/Content/Css/styleReset.css")" rel="stylesheet" />
    <style>
        section {
            width: 100%;
            height: 550px;
            float: left;
        }
        .login {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            margin-top: 100px;
            background: #bbb;
            border-radius: 8px;
            box-shadow: 0 0 5px 5px #888;
        }
        .title {
            width: 100%;
            height: 35px;
            background: #aaa;
        }
        .title span {
            height: 100%;
            width: 30px;
            color: #eee;
            margin-left: 10px;
            display: block;
            line-height: 35px;
        }
        .content {
            width: 100%;
            height: 265px;
        }
        .contentBar {
            width: 100%;
            height: 40px;
            margin-top: 20px;
        }

        .btn {
            margin-top: 20px;
        }
        .form-control {
            width: 200px;
        }

        .input {
            width: 100%;
        }

         footer {
            width: 100%;
            height: 100px;
            background: #ddd;
            float: left;
        }
        footer p {
            margin-top: 15px;
            text-align: center;
            color: gray;
        }
    </style>
    <!--引入脚本解决兼容性(hack技术，必须放入head中)-->
    <!--[if lt ie 9]>
        <script src="~/Content/Scripts/html5_css3/html5shiv.min.js"></script>
        <script src="~/Content/Scripts/html5_css3/respond.min.js"></script>
    <![endif]-->
</head>
<body class="container-fluid">
    <form id="form1">
        <section>
            <div class="login">
                <div class="title">
                    <span>登录</span>
                </div>
                <div class="content form-horizontal">
                    <div class="contentBar" style="margin-top:20px;">
                        <label for="username" class="col-sm-3 control-label">账号</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control input" id="username" name="username" placeholder="账号">
                        </div>
                    </div>
                    <div class="contentBar">
                        <label for="password" class="col-sm-3 control-label">密码</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control input" id="password" name="password" placeholder="密码">
                        </div>
                    </div>
                    <div class="contentBar">
                        <div  class="col-sm-6">
                            <img class="input" src="/Home/ValidateCode?_t=1" onclick="OnCode(this)" alt="验证码">
                        </div>
                        <div class="col-sm-6">
                            <input type="text" class="form-control input" id="validateCode" name="validateCode" placeholder="验证码">
                        </div>
                    </div>
                    <button class="btn btn-success" style="margin-left:90px;" id="btnLogin">登录</button>
                    <button class="btn btn-warning" type="reset">重置</button>
                </div>
            </div>
        </section>
        <footer>
            <p>@@Copyright By TXY</p>
            <p>2016/07/06</p>
        </footer>
    </form>
</body>
<script src="@Url.Content("~/Content/Scripts/jquery-2.0.3.min.js")"></script>
<script>
    $(function() {
        $("#btnLogin").click(function () {
            if ($("#username").val().trim() == ""||$("#password").val().trim()=="") {
                alert("请填写完整");
                return false;
            }
            if ($("#validateCode").val().trim() == "") {
                alert("请填写验证码");
                return false;
            }
            $("#btnLogin").attr("disabled","disabled");
            var parameter = $("#form1").serialize();
            $.ajax({
                url: "/Home/Index",
                type: "post",
                data: parameter,
                dataType: "json",
                success: function (data) {
                    if (data.Pass) {
                        alert(data.Msg);
                        window.location = "/UserInfo/Index";
                    }
                    else {
                        alert(data.Msg);
                        $("#btnLogin").removeAttr("disabled");
                    }
                },
                error: function (msg) {
                    alert("出错了");
                }
            });
            return false;
        });
    });
    function OnCode(obj) {
        var src = $(obj).attr('src');
        $(obj).attr('src', src + (parseInt(Math.random() * 10)));
    }
</script>
</html>